<template>
  <div class="chat" @click="closeDelButton()">
      <!-- 个人信息 -->
    <div class="my-info">
      <div class="not-avatar" :style="{background:isChat ? '#076caf': '#428dbe'}" @click="leftShow(1)">
        <img src="./png/message2.png">
        <div class="not-avatar-title">当前聊天</div>
      </div>
      <div class="not-avatar" @click="addPeopleBtn()">
        <img src="./png/chat-group2.png">
        <div class="not-avatar-title">发起群聊</div>
      </div>
      <div class="not-avatar" :style="{background:isOrg ? '#076caf': '#428dbe'}" @click="leftShow(2)">
        <img src="./png/organizational2.png">
        <div class="not-avatar-title">组织联系人</div>
      </div>

    </div>

      <!-- 左侧会话人员列表 -->
      <div v-if="!isOrg" class="session-list" @click="nowChat=true">
        <ul >
          <li v-for="(item, index) in sessionList" 
                :class="{'session-active': sessionActive === item.groupId}"
                :key="item.groupId"
                @mouseleave="item.mouseRightShow = false"
                @click="selectSession(item, index)"
                @contextmenu.prevent.stop="rightMouse(item, $event)"
                :id="item.groupId"
              >
              <div>
                <el-badge 
                  style="display: inline-block;
                    margin-top: 10px;
                    width: 40px;
                    margin-left: 10px;
                    text-align: center;
                    line-height: 40px;
                    font-size: 20px;
                    color: #fff;
                    background: #75B9E6;
                    border-radius: 50%;"
                  :value="item.unreadData > 99 ? '99+' : item.unreadData" 
                  :hidden="!item.unreadData">
                  <span v-if="item.fixedFlag" class="is-grounp"> 群 </span>
                  <span v-else> {{ item.groupName ? item.groupName.substr(0,1) : '' }} </span>
                </el-badge>
              </div>
              <div>
                <span class="ulSpan" style="font-style: italic;float: left;" > {{  item.groupName }} </span> 
                <span style="float: right; margin-right: 10px;"  >{{  item.lastTime }} </span> 
                <span class="ulSpan" style="width: 80%;" v-html="item.lastMsg" />
              </div>
            <!-- 鼠标右键弹框 -->
            <div v-if="delButton && choseId==item.groupId" class="right-mouse" :style="{'top': item.rightContainerTop, 'left': item.rightContainerLeft}">
              <span @click="delSession(item, index)"> 删除 </span>
            </div>
          </li>
        </ul>
      </div>

      <!-- 右侧对话列表 -->
      <div class="chat-container" v-if="nowChat && !isOrg">

        <div class="chat-list">
          <div class="chat-title">
            <div>
              <!-- 头像 -->
              <span v-if="fixedFlag" style="background: #75B9E6;" class="is-avatar" >群</span>
              <span v-else class="is-avatar" > {{ this.chatTitle ? this.chatTitle.substr(0,1) : '' }} </span>
            </div>
            <div style="width:100%;" class="chat-person">
              <span v-html="this.chatTitle" style="margin-left:5px;"/>
              <span v-if="fixedFlag === 1 && reduceFlag === 0">（{{ groupUsers.length }}人）</span>
            </div>
            <div>
              <i style="float: right;" class="el-icon-setting"   @click="setGroupBtn" v-if="fixedFlag === 1 && reduceFlag === 0" />
            </div>
          </div>
          <ul style="margin-top: 0px;" ref="chatListRefItem">
            <li v-if="moreMessageBtnShow && groupId && chatList.length !== 0" class="more-message-btn"> 
              <el-button @click="getMoreMessage" type="text"> 查看更多消息 </el-button> 
            </li>
            <li :id="'infoId-' + item.infoId" class="chat-item" v-for="(item, index) in chatList" :key="item.inforId">
              <div class="myself" v-if="item.sendUserId === nowUserId && item.msgFlag === 0">
                <div>
                  <p> {{ item.sendUserName }} <span> {{ item.sendTime }} </span> </p>
                  
                      <div @mouseleave="item.show = false" @contextmenu.prevent="revokeBtnShowFn(item)">
                        <!-- 文件 -->
                        <div v-if="item.fileId" class="file-wrapper">
                          <!-- 图片文件 -->
                          <div v-if="item.fileSuffix === 'png' || item.fileSuffix === 'jpg'" class="img-file">
                            <el-image
                              :src="getIcon(item)"
                              :preview-src-list="[getIcon(item)]"
                              fit="cover"
                            />
                          </div>

                          <!-- 其他文件 -->
                          <div v-else class="other-file">
                            <div>
                              <img src="./png/file.png" alt="">
                              <span>{{ item.fileSuffix }}</span>
                            </div>
                            <div>
                              <p> {{ item.msg }} </p>
                              <p> {{ item.fileSizeInfo }} <el-button type="text" @click="downloadBtn(item)"> 下载 </el-button> </p>
                            </div>
                          </div>
                        </div>

                        <!-- 文本信息 -->
                        <p v-else class="msg-wrapper" v-html="item.msg"></p>

                        <!-- 是否已读 -->
                        <p class="read-or-not" v-if="!fixedFlag"> {{ item.unreadFlag ? '已读' : '未读' }} </p>

                        <div class="withdraw-wrapper" v-if="item.show">
                          <el-button link type="primary" @click="revokeBtn(item, index)"> 撤回 </el-button>
                        </div>
                      </div>
                </div>
                
                <div>
                  <span> {{ item.sendUserName.substr(0,1) }} </span>
                </div>
              </div>

              <div class="others"  v-if="item.sendUserId !== nowUserId && item.msgFlag === 0">
                <div>
                  <span> {{ item.sendUserName.substr(0,1) }} </span>
                </div>

                <div>
                  <p> {{ item.sendUserName }} <span> {{ item.sendTime }} </span> </p>

                  <!-- 文件 -->
                  <div v-if="item.fileId" class="file-wrapper">
                    <!-- 图片文件 -->
                    <div v-if="item.fileSuffix === 'png' || item.fileSuffix === 'jpg'" class="img-file">
                      <el-image
                        :src="getIcon(item)"
                        :zoom-rate="1.2"
                        :preview-src-list="[getIcon(item)]"
                        :initial-index="4"
                        fit="cover"
                      />
                    </div>

                    <!-- 其他文件 -->
                    <div v-else class="other-file">
                      <div>
                        <i class="el-icon-folder-add"></i>
                        <span>{{ item.fileSuffix }}</span>
                      </div>
                      <div>
                        <p> {{ item.msg }} </p>
                        <p> {{ item.fileSizeInfo }} <el-button type="primary" link @click="downloadBtn(item)"> 下载 </el-button> </p>
                      </div>
                    </div>
                  </div>

                  <!-- 文本信息 -->
                  <p v-else class="msg-wrapper" v-html="item.msg"></p>
                </div>
              </div>
              

              <div style="text-align: center; color: #8896B7;font-size: 14px;" v-if="item.msgFlag === 1">
                <span v-html="item.msg"></span>
              </div>
            </li>
            <li ref="lastChatItemRef" class="last-chat-item"></li>
          </ul>
        </div>

        <!-- 消息发送框 -->
        <div class="chat-send" v-if="chatTitle && reduceFlag === 0">
          <!-- 工具栏 -->
          <div :class="['chat-tool']">
            <div class="chat-tool-item">
              <div>
                <Emoji  @sendEmoji="sendEmoji" />
              </div>
              <div class="chat-tool-item-upload">
                <el-upload
                  :headers="headers"
                  :action="uploadUrl"
                  :data="paramsData"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  >
                  <el-icon class="el-icon-folder-add" />
                </el-upload>
              </div>
            </div>
          </div>
          
          <!-- 消息输入框 -->
          <div class="chat-input">
            <el-input
              v-model="sendMessage"
              class="borderless"
              :rows="2"
              resize="none"
              type="textarea"
              @keyup.enter.native="enterSendBtn"
              maxlength="200"
              placeholder="请输入对话内容"
            />
          </div>
          
          <!-- 消息发送按钮 -->
          <div class="chat-send-btn">
            <el-button type="primary" @click="sendBtn" size="medium"> 发送 </el-button>
          </div>
        </div>
      </div>
      <!-- 部门树 -->
      <div v-if="isOrg"  class="dept">
        <el-input maxlength="30" clearable v-model="orgFilterText" prefix-icon="el-icon-search" placeholder="搜索部门名称" size="mini" />
        <!-- 懒加载 -->
        <!-- <el-tree 
          ref="orgTreeRef"
          :data="orgTree"
          :load="load"
          lazy
          :props="defaultProps"
          :default-expand-all="false"
          :expand-on-click-node="false"
          :highlight-current="true"
          :current-node-key="currentKey"
          :filter-node-method="filterNode"
          node-key="id"
          @node-click="nodeClick"
        /> -->
        <!-- 部门树 -->
        <el-tree 
          ref="orgTreeRef"
          :data="orgTree"
          :props="orgDefaultProps" 
          :filter-node-method="filterNode"
          @node-click="nodeClick"
          highlight-current
        />
      </div>
      <!-- 部门人员 -->
      <div v-if="isOrg" class="team">
        <p v-if="orgName==''"> （0人）</p>
        <P v-else> {{ orgName }}（{{ userList.length }}人）</P>
        
        <ul>
            <li v-for="(item, index) in userList" :key="index" @click="userClick(item, index)" :class="{'chosedItem':index==userActive}">
              <el-avatar :size="50">{{ item.realName != null ? item.realName.substr(0,1) : "null" }}</el-avatar>
              <div style="margin-top: -35px;margin-left: 30px;">{{ item.realName != null ? item.realName : "null" }}</div>
            </li>
        </ul>
        <div class="empty-container" style="display: flex;justify-content: center;align-items: center; height: 300px; ">
          <el-empty style="text-align:center;" :image-size="200" v-if="userList.length === 0" description="暂无人员" />
        </div>
      </div>
      <!-- 个人信息 -->
      <div v-if="isOrg"  class="person">
        <div class="person-box" v-if="userActive || userActive === 0">
          <p> <el-avatar class="avatar" :size="50">{{ userInfo.realName.substr(0,1) }}</el-avatar> </p>
          <div>
            <p style="text-align: center;font-weight: 500;font-size: 20px;color: #000;"> {{ userInfo.realName }} </p>
            <p> <span>手机:</span> {{ userInfo.phone ? userInfo.phone:'(空)' }} </p>
            <p> <span>邮箱:</span> {{ userInfo.email ? userInfo.email:'(空)' }} </p>
            <p> <span>部门:</span> {{ userInfo.orgName ? userInfo.orgName:'(空)' }} </p>
            <p> <span>职位:</span> {{ userInfo.positionName ? userInfo.positionName:'(空)' }} </p>
            <div style="text-align: center;" v-if="nowUserId !== userInfo.userId">
              <el-button type="primary" @click="sendMessageToUser(userInfo)" size="mini"> 发送消息 </el-button>
            </div>
          </div>
        </div>
      </div>

    <!-- 群聊信息 -->
    <el-dialog
      :visible.sync="drawerVisible"
      title="群组信息"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :lock-scroll="false"
      append-to-body
      class="setGroup"
      @close="closeDialogQl"
      width="800px"
      >
      <div class="demo-input-suffix">
        <span>群组名称</span>
        <el-input :disabled="!adminFlag" @change="groupNameBlur" v-model="groupForm.groupName" maxlength="20" />
      </div>

      <div class="group-users-wrapper">
        
        <div class="userHeihgt" v-if="adminFlag" @click="addMember">
          <el-avatar style="background-color: rgb(205, 205, 205);" :size="50">+</el-avatar>
        </div>
        
        <div class="userHeihgt" v-for="(item, index) in groupUsers" :key="index"            
            @mousemove="delTrue(item)"
            @mouseout="delFalse()">
          <el-avatar v-if="!showAvatar(item)" class="avatar" :size="50">{{ item.userName.substr(0,1) }}</el-avatar>
          <div @click="delMember(item, index)" >
            <el-avatar 
              v-if="showAvatar(item)"
              class="avatar" 
              :size="50"  
              style="background-color: red;"> 
                <i class="el-icon-delete" />
            </el-avatar>
          </div>
          <div>{{ item.userName }}</div>
          <div v-if="item.adminFlag === 1"><el-tag  size="mini"  effect="dark">管理员</el-tag></div>
        </div>
      </div>

      <div class="group-btn-group">
        <el-button v-if="!adminFlag" @click="exitGroupBtn" type="primary" size="mini"> 退出群组 </el-button>
        <el-button v-else @click="dissolveGroupBtn" type="danger" size="mini"> 解散群组 </el-button>
      </div>
    </el-dialog>

    <!-- 创建群聊 -->
    <div class="addPeople">
      <el-dialog
        width="45vw"
        class="chat-dialog"
        :visible.sync="dialogVisible"
        :modal-append-to-body="false"
        :lock-scroll="false"
        :show-close="false"
        append-to-body
        >
        <div>
          <el-row class="chat-row">
            <el-col :span="11" class="chat-row-col1" style="">
              <el-input maxlength="30" clearable v-model="filterText" prefix-icon="el-icon-search" placeholder="搜索人员名称" />
              <el-tree
                class="chat-tree"
                style=""
                ref="treeRef"
                :data="treeData"
                :props="orgDefaultProps"
                :filter-node-method="filterNode"
                show-checkbox
                :check-strictly="true"
                @check="checkUserList"
                node-key="orgId"
              />
            </el-col>
            <el-col :span="13" class="chat-row-col2" style="">
              <div class="chat-col2-header" style=" ">
                <span style="">发起群聊</span>
                <span style=""> 已选人员：{{ selectedUserList.length }} </span>
              </div>
              <div class="chat-col2-body" style="">
                <el-tag
                  v-for="(tag, index) in selectedUserList"
                  :key="tag.userId"
                  style="margin-right:10px;"
                  closable
                  :disable-transitions="false"
                  @close="userHandleClose(tag, index)"
                  >
                  {{ tag.orgName }}
                </el-tag>
              </div>
              <div class="chat-col2-footer" style="">
                <el-button @click="dialogVisible = false" style="width:6vw" size="small">取消</el-button>
                <el-button type="primary" style="margin-left:45px;width:6vw" @click="confirmBtn" size="small">确定</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/framework/utils/auth'
import { chatGroupQueryApi, chatHistoryPageApi,
         chatHistoryListApi, chatHistoryDelApi,
         chatHistoryRevokeApi, chatGroupInfoApi,
         chatGroupEditApi, chatGroupDelApi,
         chatGroupMemberApi, chatGroupExitApi,
         chatGroupAddApi , getOrgTreeApi ,
         getSysUserPageApi, getOrgTreeApiLazy } from './chatjs'
import { parseTime } from '@/framework/utils/date'
import Emoji from './emoji.vue'
import store from '@/store'
import { cloud } from '@/framework/utils/request'
import { getUserTree } from '../../framework/api/notice'
import { forEach } from '@/framework/mock/accountUnlocking'

export default {
  name: "chatOnline",
  
  components: {
    Emoji
  },
  data() {
    return {
      delUserId: '',
      choseId: '',
      nowChat: false,
      delButton: false,
      nowUserId: '',
      ws: null,
      sendMessage:'',
      lastChatItemRef:null,
      sessionActive: '' ,
      chatTitle:'',
      chatList:[],
      sessionList:{},
      userInfoInPage:null,
      groupId:null,
      moreMessageBtnShow: true,
      // 是否是群组 0不是 1是
      fixedFlag:0 , 
      //群组是否已解散或退出 0未解散 1已解散
      reduceFlag: 0,
      drawerVisible: false,
      // 群组成员
      groupInfo:{},
      groupUsers:[],
      adminFlag: false,
      groupForm: {
        groupName: ''
      },
      // 上传文件携带的token
      headers:{
        'Authorization': getToken()
      },
      // 上传文件地址
      uploadUrl: process.env.VUE_APP_BASE_API + cloud.file + '/sysFileInfo/upload',
      // 上传的文件，是否是机密文件
      paramsData: {
        secretFlag: 'N'
      },
      //------弹窗字段信息-----------------------------
      isChat: true,
      isOrg: false,
      userInfo:{},
      dialogVisible:false,
      treeData:[],
      selectedUserList:[],
      filterText:'',
      treeRef:[],
      ChatRef:'',
      newGroupId:'',
      addMemberGroupId:'',
      defaultProps:{
        children: 'children',
        label: 'name',
      },
      orgTree:[],
      orgTreeRef:[],
      orgFilterText:'',
      orgDefaultProps:{
        children: 'children',
        label: 'orgName',
      },
      orgName: '',
      userActive: '',
      userInfo: {},
      userList: [],
      // 查询参数
      filterForm: {
        account: '',
        realName: '',
        orgId: '',
        pageNo: 1,
        pageSize: 10
      },
      totalRows:null,
      youkeId: "nb",
    };
  },
  created(){
    this.nowUserId=store.state.user.userId;
    this.webSocketInit();
  },
  methods:{
    baseURL() {
      return process.env.VUE_APP_TARGET
    },
    // WebSocket链接
    webSocketInit(){
      const path=this.baseURL().split("://")[1];
      // 线上
      // const path = "172.31.86.10:21023";
      const youkeId = this.youkeId;//标识
      // var wspath="ws://localhost:9528/dev-api/business/chat/online/manager/uuid&"+getToken()+"/"+youkeId;//本地
      var wspath="ws://ctiam.com:23443/prod-api/business/chat/online/manager/uuid&"+getToken()+"/"+youkeId;//线上
      this.ws = new WebSocket(wspath);
      // console.info("init ws=",this.ws)
      this.ws.onmessage = (e) => {
        console.log("onmessage=",e)
        this.websocketonmessage(e)
      }
      this.ws.onclose = (e) => {
        console.log("onclose=",e)
        this.websocketclose(e);
      };
      this.ws.onopen = (e) => {
        console.log("open=",e)
        this.websocketOpen(e);
      };
    },
    // 链接
    websocketonmessage (e) {
      let res = JSON.parse(e.data);
      const obj = this.sessionList[res.groupId]
      let msgData = {}
      switch (res.code) {
        // 消息数据 msgFlag: 0消息， 1通知 
        case "msgData":
          if (res.groupId === this.groupId) {
            this.chatList.push({
              delFlag: 0,
              msgFlag: 0,
              fileSuffix: res.fileSuffix,
              fileSizeInfo: res.fileSizeInfo,
              fileId: res.fileId,
              msg: res.msg,
              infoId: res.infoId,
              sendTime: parseTime(new Date(res.sendTime), '{y}-{m}-{d} {h}:{i}:{s}'),
              sendUserName: res.sendUserName,
              sendUserId: res.sendUserId,
              show: false
            })
            this.reduceFlag = 0
            if (res.sendUserId !== store.state.user.userId) {
              let sendData = {
                groupId: this.groupId,
                code: 'readData'
              }
              this.websocketsend(sendData)
            }
          }
          if (obj) {
            if (res.groupId !== this.groupId && res.sendUserId !== store.state.user.userId) {
              obj.unreadData++
            }
            obj.reduceFlag = 0
            obj.lastMsg = res.msg
            obj.lastTime = parseTime(new Date(res.sendTime), '{y}-{m}-{d} {h}:{i}:{s}')
          } else {
            this.sessionList[res.groupId] = {
              unreadData: res.sendUserId !== store.state.user.userId ? 1 : 0,
              reduceFlag: 0,
              lastMsg: res.msg,
              groupId: res.groupId,
              fixedFlag: res.fixedFlag,
              groupName: res.groupName,
              lastTime: parseTime(new Date(res.sendTime), '{y}-{m}-{d} {h}:{i}:{s}')
            }
          }
          
          break;

        // 确认数据
        case "ackData":
          if (res.status !== 0) {
            this.$message({
              message: res.tip,
              type: 'warning',
            })
          } else {
            if (res.groupId === this.groupId) {
              let msgData = {
                delFlag: 0,
                msgFlag: 0,
                fileSuffix: res.fileSuffix,
                fileSizeInfo: res.fileSizeInfo,
                fileId: res.fileId,
                infoId: res.infoId,
                msg: res.fileId ? res.msg : this.sendMessage.replace(/</g, '&lt;'),
                sendTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
                sendUserName: store.state.user.name,
                sendUserId: store.state.user.userId,
                show: false
              }
              this.chatList.push(msgData)
            }
            this.sendMessage = ''
          }
          break;

        // 已读数据
        case "readData":
          if (this.groupId) {
            this.chatList.forEach(element => {
              element.unreadFlag = 1
            })
          }
          break;
        
        // 撤回数据
        case "delData":
          this.chatList.forEach((child, index) => {
            if (child.infoId === res.infoId) {
              this.chatList[index].delFlag = 1
              this.chatList[index].msgFlag = 1
              this.chatList[index].msg = `${child.sendUserName}撤回了一条消息`
            }
          })
          this.sessionList[res.groupId].lastMsg =  res.tip
          this.sessionList[res.groupId].lastTime = parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
          if (this.sessionList[res.groupId].unreadData > 0) {
           this.sessionList[res.groupId].unreadData--
          }
          
          break;

        // 解散群聊  
        case "groupDelData":
          this.drawerVisible = false
          this.reduceFlag = 1
          if (obj) {
            obj.reduceFlag = 1
            obj.lastMsg = res.tip
          }
          if (res.groupId === this.groupId) {
            msgData = {
              msgFlag: 1,
              msg: res.tip
            }
            this.chatList.push(msgData)
          }
          break;

        // 踢出群聊
        case "reduceData":
          if (res.userIds && (res.userIds[0] === store.state.user.userId)) {
            this.drawerVisible = false
            this.reduceFlag = 1
            
            if (obj) {
              obj.reduceFlag = 1
            }
          }
          this.getMemberList()
          if (obj) {
            obj.lastMsg = res.tip
          }
          if (res.groupId === this.groupId) {
            msgData = {
              msgFlag: 1,
              msg: res.tip
            }
            this.chatList.push(msgData)
          }
          break;

        // 加入群聊
        case "addData":
          if (obj) {
            obj.lastMsg = res.tip
            obj.reduceFlag = 0
          }
          if (res.groupId === this.groupId) {
            this.reduceFlag = 0
            msgData = {
              msgFlag: 1,
              msg: res.tip
            }
            this.chatList.push(msgData)
          }
          
          this.getMemberList()
          break;

        // 修改群名
        case "groupNameData":
          if (res.groupId === this.groupId) {
            this.chatTitle = res.msg
            msgData = {
              msgFlag: 1,
              msg: res.tip
            }
            this.chatList.push(msgData)
            this.groupForm.groupName = res.msg
          }
          if (obj) {
            obj.groupName = res.msg
            obj.lastMsg = res.tip
          }
          break;

        // 消息发送异常
        case "exceptionData":
          break;
        default:
          break
      }
      console.info("chatList",this.chatList)
      if (this.groupId) {
        this.$nextTick(() => {
          this.scrollBottom(this.groupId)
        })
      }
    },
    // websocket关闭
    websocketclose(e) {
      // console.log("websocket关闭")
      // code 1000 是主动关闭
      if (e.code !== 1000) {
        this.webSocketInit()
      }
    },
    // 主动关闭
    close () {
      this.ws.close(1000)
    },
    // 连接成功
    websocketOpen(e) {
      console.log("连接成功")
    },
    //数据发送
    websocketsend(agentData, callback) {
      this.$nextTick(() => {
        this.scrollBottom(this.groupId)
      })
      if (this.ws.readyState === WebSocket.OPEN) {
        //若是ws开启状态
        this.ws.send(JSON.stringify(agentData));
        // 重新获取聊天数据
        chatHistoryPageApi({ groupName: '' })
        .then(({ data, code }) => {
          if (code === '00000') {
            this.sessionList = data
            this.getChatHistoryList()
            this.sendMessage = ""
          }
        })
      } else {
        this.$message.warning("发送失败")
      }
    },
    // 回车发送
    enterSendBtn (event) {
      if (event.shiftKey && event.keyCode === 13) {
      } else if (event.keyCode === 13) {
        event.preventDefault();
        this.sendBtn()
      }
    },
    // 发送按钮
    sendBtn() {
      const message = this.sendMessage.replace(/\n/g, '').replace(/ /g, '')
      if (!message) return
      this.addSessionList()
    },
    // 左侧对话列表中不存在，即添加
    addSessionList () {
      let sendData = {
        delFlag: 0,
        msgFlag: 0,
        groupId: this.groupId,
        msg: this.sendMessage.replace(/</g, '&lt;'),
        code: 'msgData',
        fixedFlag: this.fixedFlag,
        sendUserName: store.state.user.name,
        sendUserId: store.state.user.userId
      }
      this.websocketsend(sendData)
      let obj = this.sessionList[this.groupId]
      // console.log("this.sessionList=",this.sessionList)
      // console.log("this.obj=",obj)
      if (obj) {
        obj.lastMsg = this.sendMessage.replace(/</g, '&lt;')
        obj.lastTime = parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
      } else {
        this.sessionList[this.groupId] = {
          unreadData: 0,
          lastMsg: this.sendMessage.replace(/</g, '&lt;'),
          groupId: this.groupId,
          groupName: this.userInfoInPage.realName,
          lastTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
        }
      }
      this.sessionActive = this.groupId
      // 清空输入栏
      this.sendMessage = ""
    },
    // 选择对话
    selectSession (item, index) {
      if (item.unreadData > 0) {
        let sendData = {
          groupId: item.groupId,
          code: 'readData'
        }
        this.websocketsend(sendData)
      }

      this.sessionActive = item.groupId
      this.chatTitle = item.groupName
      this.groupId = item.groupId
      this.fixedFlag = item.fixedFlag
      this.sessionList[item.groupId].unreadData = 0
      this.moreMessageBtnShow = true
      this.groupInfo = item
      this.reduceFlag = item.reduceFlag
      this.getChatHistoryList()
  
      if (item.fixedFlag === 1 && item.reduceFlag === 0) {
        this.groupForm.groupName = item.groupName
        this.getMemberList()
      }
    },
    // 查询聊天记录
    getChatHistoryPage () {
      chatHistoryPageApi({
        groupName: ''
      })
      .then(({ data, code }) => {
        // console.log("res=",data)
        // console.log("res=",code)
        if (code === '00000') {
          this.sessionList = data
          // chatGroupQueryApi({
          //   userId: store.state.user.userId
          // }).then(({ code, data }) => {
            
          //   if (code === '00000') {
          //     if (this.sessionList[data.groupId]) {
          //       this.chatTitle = this.sessionList[data.groupId].groupName
          //       this.sessionActive = data.groupId
          //       this.groupId = data.groupId
          //       this.getChatHistoryList();
          //     }
          //   }
          // })
        }
      })
    },
    // 查询人员对话种的聊天记录
    getChatHistoryList () {
      chatHistoryListApi({
        groupId: this.groupId
      })
      .then(({ data, code }) => {
        if (code === '00000') {
          this.chatList = data.map(item => ({...item, show: false}))
          if (data.length < 10) {
            this.moreMessageBtnShow = false
          }
          this.$nextTick(() => {
            this.scrollBottom();
          })
        }
      })
    },
    // 使会话滚动到最底部
    scrollBottom () {
      this.$refs.chatListRefItem.scrollTop = this.$refs.chatListRefItem.scrollHeight;
    },
    // 鼠标右键
    rightMouse(item, event) {
      item.mouseRightShow = true
      item.rightContainerTop = event.layerY + 5 + 'px'
      item.rightContainerLeft = event.layerX + 5 + 'px'
      this.choseId=item.groupId;
      this.delButton=true;
    },
    //关闭删除按钮
    closeDelButton(){
      this.delButton=false;
      this.choseId='';
    },
    // 删除对话
    delSession (item, index) {
      if (item.groupId === this.groupId) {
        this.groupId = ''
        this.chatTitle = ''
        this.chatList = []
      }
      delete this.sessionList[item.groupId]
      chatHistoryDelApi({
        groupId: item.groupId
      })
    },
    // 查看更多消息
    getMoreMessage () {
      chatHistoryListApi({
        groupId: this.groupId,
        infoId: this.chatList[0].infoId
      })
      .then(({ data, code }) => {
        if (code === '00000') {
          if (data.length < 10) {
            this.moreMessageBtnShow = false
          }
          this.chatList = [...data.map(item => ({...item, show: false})), ...this.chatList]
          this.$nextTick(() => {
            const infoId = this.chatList[data.length - 1].infoId
            document.getElementById('infoId-' + infoId).scrollIntoView()
          })
        }
      })
    },
    // 发送表情
    sendEmoji(val) {
      console.log("标签=",val)
      this.sendMessage += val
    },
    // 上传成功回调
    handleAvatarSuccess({ data }) {
      let sendData = {
        groupId: this.groupId,
        msg: data.fileOriginName,
        fileSuffix: data.fileSuffix,
        fileSizeInfo: data.fileSizeInfo,
        fileId: data.fileId,
        code: 'msgData',
        sendUserName: store.state.user.name,
        sendUserId: store.state.user.userId
      }
      this.websocketsend(sendData)

      let obj = this.sessionList[this.groupId]
      if (obj) {
        obj.lastMsg = data.fileOriginName
        obj.lastTime = parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
      } else {
        this.sessionList[this.groupId] = {
          unreadData: 0,
          lastMsg: data.fileOriginName,
          groupId: this.groupId,
          groupName: this.userInfoInPage.realName,
          lastTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
        }
        this.sessionActive = this.groupId
      }
    },
    // 上传之前回调
    beforeAvatarUpload(rawFile) {
      if (rawFile.size / 1024 / 1024 > 10) {
        this.$message.error('文件大小不可超过10M!')
        return false
      }
      return true
    },
    // 获取图片
    getIcon (item) {
      return `${this.baseURL()}file/sysFileInfo/public/preview?fileId=${item.fileId}`
    },
    // 下载按钮
    downloadBtn (item) {
      // window.location.href = this.baseURL()+`sysFileInfo/publicDownload?fileId=${item.fileId}`
      // 本地
      window.location.href = `http://localhost:9528/dev-api/file/sysFileInfo/publicDownload?fileId=${item.fileId}`
    },
    // 撤回按钮
    revokeBtn (item, index) {
      chatHistoryRevokeApi({ infoId: item.infoId })
    },
    // 撤回按钮
    revokeBtnShowFn (item, index) {
      const time = new Date().getTime() - new Date(item.sendTime).getTime()
      if (time < 1000 * 60 * 2) {
        item.show = true
      }
    },
    // 群组设置按钮 / 查询群组信息
    setGroupBtn() {
      this.drawerVisible = true
    },
    // 设置群组名称
    groupNameBlur () {
      this.$confirm(
        '确定修改群名称?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(res => {
        if (!this.groupForm.groupName) {
          this.groupForm.groupName = this.groupInfo.groupName
          return this.$message({
            type: 'warning',
            message: '群组名称不能为空'
          })
        }
        chatGroupEditApi({
          groupId: this.groupId,
          groupName: this.groupForm.groupName
        }).then(({code, data}) => {
          if (code === '00000') {
            this.chatTitle = this.groupForm.groupName
            const obj = this.sessionList[this.groupId]
            obj.groupName = this.groupForm.groupName
          }
        })
      }).catch(err => {
        this.$message.warning("取消操作！")
      })
    },
    // 解散群组按钮
    dissolveGroupBtn () {
      this.$confirm(
        '确定删除群组?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        chatGroupDelApi({
          groupId: this.groupId,
        }).then(({code, data}) => {
          if (code === '00000') {
            const obj = this.sessionList[this.groupId]
            obj.reduceFlag = 1
            this.reduceFlag = 1
            this.drawerVisible = false
            this.$message({type: 'success',message: '操作成功'})
          }
        })
      })
    },
    // 退出群组按钮
    exitGroupBtn () {
      this.$confirm(
        '确定退出群组?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        chatGroupExitApi({
          groupId: this.groupId,
        }).then(({code, data}) => {
          if (code === '00000') {
            this.reduceFlag = 1
            this.drawerVisible = false
            const obj = this.sessionList[this.groupId]
            if (obj) {
              obj.reduceFlag = 1
            }
            this.$message({type: 'success',message: '操作成功'})
          }
        })
      })
    },
    // 获取成员
    getMemberList () {
      chatGroupInfoApi({
        groupId: this.groupId
      }).then(({code, data}) => {
        if (code === '00000') {
          this.groupUsers = data.groupUsers
          this.adminFlag = data.createUserId === store.state.user.userId
        }
      })
    },
    // 添加成员
    addMember() {
      this.addMemberGroupId = this.groupId;
      this.addBtn();
    },
    // 关闭群聊设置弹窗
    closeDialogQl(){
      // 重置addMemberGroupId为空
      this.addMemberGroupId = ""
    },
    // 删除按钮显示
    delTrue(item){
      this.delUserId=item.userId;
    },
    // 删除按钮隐藏
    delFalse(){
      this.delUserId='';
    },
    //删除按钮判断
    showAvatar(item){
      return this.adminFlag && item.userId !== this.nowUserId && this.delUserId==item.userId
    },
    // 删除成员
    delMember (item, index) {

      this.$confirm(
        '确定删除该成员?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        chatGroupMemberApi({
          addOrReduce: 0,
          groupId: this.groupId,
          groupUserIds: [item.userId]
        }).then(({ code, data }) => {
          if (code === '00000') {
            this.groupUsers.splice(index, 1)
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          }
        })
      })
    },
    //--弹窗字段信息--------
    filterNode(value, data){
      if(!value){
        return true;
      }
      return data.orgName.indexOf(value) !== -1;
    },
    // 人员树选择
    checkUserList (node, data) {
      console.log("data=",data)
      this.selectedUserList = data.checkedNodes
    },
    // 创建群聊
    addPeopleBtn(){
      this.groupId='';
      this.addBtn();
    },
    addBtn() {
      this.dialogVisible = true
      this.selectedUserList = []
      // 获取人员树
      // getUserTree().then((res) => {
      //   if (res.code === '00000') {
      //     this.treeData = res.data
      //   }
      // })
      getOrgTreeApi().then(({ code, data }) => {
        if (code === '00000') {
          let treeData = this.getNewOrgUserTree(data)
          console.log("treeData=",treeData)
          this.treeData = treeData
        }
      })
    },
    // 处理组织树获取新数据
    getNewOrgUserTree(tree){
      tree.map(async element => {
        // console.log("element=",element)
        let newJson = {}
        if (element.orgParentId === "-1") {
          element.disabled = true
        }
        let orgId = element.orgId;
        if (orgId && element.children) {
          element.children.map(child =>{
            child.disabled = true
          })
          let userList = await this.getUserList(orgId);
          // console.log("userList=",userList)
          // 过滤当前部门之下的数据
          let newUserList = userList.filter(item => item.orgName == element.orgName)
          // console.log("newUserList=",newUserList)
          // 改变数组内容
          let realUserList = newUserList.map(item2 =>({
             ...item2,
            orgName:item2.realName,
            orgId:item2.userId,
            id:item2.userId,
            name:item2.realName,
          }))
          // console.log("realUserList=",realUserList)
          element.children = realUserList.concat(element.children)
          // console.log("element.children=",element.children)
        }
        if(element.children&&element.children.length>0){
          this.getNewOrgUserTree(element.children)
        }
      })
      return tree;
    },
    // 设置部门禁止选择
    setDisabled(data) {
      if (data.nodeType ==='org' || store.state.user.userId === data.id) {
        return true
      }else{
        return false
      } 
    },
    // 创建群聊确定
    confirmBtn () {
      var groupName="";
      var groupUserIds=[]; 
      this.selectedUserList.forEach(item=>{
        if(store.state.user.userId != item.id){
          groupName=groupName+item.name+",";
          groupUserIds.push(item.id);
        }
      });   
      // 添加成员后修改群名称
      // if(this.groupId == ""){
      //   chatGroupMemberApi({
      //     addOrReduce: 1,
      //     groupId: this.groupId,
      //     groupUserIds: groupUserIds
      //   }).then(({ code, data }) => {
      //     if (code === '00000') {
      //       this.$message({
      //         type: 'success',
      //         message: '操作成功'
      //       })
      //       this.dialogVisible = false
      //       if(this.groupForm.groupName.indexOf(",")>-1){
      //         chatGroupEditApi({
      //           groupId: this.groupId,
      //           groupName: this.groupForm.groupName+","+groupName.substring(0,groupName.length-1)
      //         }).then(({code, data}) => {
      //           if (code === '00000') {
      //             this.chatTitle = this.groupForm.groupName
      //             const obj = this.sessionList[this.groupId]
      //             obj.groupName = this.groupForm.groupName
      //           }
      //         })
      //       }
      //     }
      //   })
      //   return ;
      // }
      if (this.addMemberGroupId) {//添加新组员
        if (this.selectedUserList.length < 1){
          this.$message.warning('至少添加1个人');
          return 
        }  
        chatGroupMemberApi({
          addOrReduce: 1,
          groupId: this.addMemberGroupId,
          groupUserIds: this.selectedUserList.map(item => item.id)
        }).then(({ code, data }) => {
          if (code === '00000') {
            this.dialogVisible = false
            // ChatRef.value.getMemberList()
            this.$message.success('操作成功');
            this.getMemberList();
          }
        })
        // 新增群聊
      } else {
        if (this.selectedUserList.length < 2) {
          this.$message.warning('至少添加两个人');
          return ;
        }
        groupName=groupName+store.state.user.name;
        chatGroupAddApi({
          groupName: groupName,
          groupUserIds: groupUserIds
        }).then(({ code, data }) => {
          if (code === '00000') {
            this.dialogVisible = false
            this.isChat = true
            this.newGroupId = data.groupId
          }
        })
      }

    },
    userHandleClose (tag, index) {
      this.selectedUserList.splice(index, 1)
      this.$refs.treeRef.setChecked(tag.userId, false)
    },
    //----组织显示-------------------------------------
    leftShow(val){
      if(val == 1){
        this.isChat=true;
        this.isOrg=false;
      }else{
        this.isChat=false;
        this.isOrg=true;
        this.getOrgTree();
      }
    },
    // 获取部门树
    getOrgTree(){
      // 懒加载
      // getOrgTreeApi({orgId: 0}).then(({ code, data }) => {
      //   if (code === '00000') {
      //     this.orgTree = data
      //     this.selectedOrg = data[0]
      //     this.currentKey = data[0].id
      //     this.$nextTick(() => {
      //       this.$refs.orgTreeRef.setCurrentKey(res.data[0].id)
      //     })
      //   }
      // })
      getOrgTreeApi().then(({ code, data }) => {
        if (code === '00000') {
          this.orgTree = data
        }
      })
    },
    // // 懒加载
    load(tree, resolve) {
      // console.log("tree=",tree)
      let orgid = ''
      if (!tree.data || tree.data.length == 0) {
        orgid = 0
        return
      } else {
        orgid = tree.data.id
      }
      getOrgTreeApi({ orgId: orgid }).then((res) => {
        // console.log("asdhkja=",res)
        const data = res.data.map((item, index) => {
          this.selectedOrg = res.data[0]
          this.currentKey = res.data[0].id
          this.$nextTick(() => {
            this.$refs.orgTreeRef.setCurrentKey(res.data[0].id)
          })
          return item
        })
        resolve(data)
      })
    },
    // 树节点被点击的时候触发	
    async nodeClick (data) {
      console.log("asdjhajkdb=",data)
      // 重置数据
      this.userList = []
      // this.getUserList(data.id)
      let res = await getSysUserPageApi({
        account: '',
        realName: '',
        pageNo: 1,
        pageSize: 100,
        orgId: data.orgId,
        containSelf:false
      })
      // console.log("resujh=",res)
      this.userList = res.data.rows
      this.totalRows = res.data.totalRows

      this.orgName = data.orgName
      this.userActive = ''
      this.userInfo = {}
    },
    // 获取当前组织下的人员
     async getUserList (orgId) {
      let res = await getSysUserPageApi({
        account: '',
        realName: '',
        pageNo: 1,
        pageSize: 100,
        orgId: orgId,
        containSelf:false
      })
      if (res.code === '00000') {
        return res.data.rows
      }
    },
    //查看用户详情
    userClick (item, index) {
      this.userActive = index
      this.userInfo = item
    },
    //发送信息
    sendMessageToUser(userInfo){
      console.log("userInfo=",userInfo)
      chatGroupQueryApi({
        userId: userInfo.userId
      }).then(({ code, data }) => {
        console.log("data=",data)
        if (code === '00000') {
          this.leftShow(1);
          this.chatTitle = userInfo.realName;
          this.groupId = data.groupId;
          this.nowChat = true;
          this.fixedFlag = data.fixedFlag;
          this.getChatHistoryList();
        }
      })
    }
  },
  mounted(){
    this.getChatHistoryPage()
  },

  destroyed(){
    this.close()
  },
  watch:{
    filterText(val){
      this.$refs.treeRef.filter(val);
    },
    orgFilterText(val){
      this.$refs.orgTreeRef.filter(val);
    },
    userInfo (val) {
      // console.log("val=",val);
      this.userInfoInPage=val;
      this.chatTitle=val.realName
    },
    newGroupId () {
      this.getChatHistoryPage()
    }
  },
  
}
</script>


<style lang="scss" scoped>
  p {
    margin: 0;
  }
  div.chat {
    display: flex;
    height: 100%;
    width: 100%;
    // max-height: 85vh;
    min-height: 89vh;
  }
  
    // 左侧会话人员列表
    .session-list {
      position: relative;
      width: 21%;
      height: 100%;
      max-height: 89vh;
      min-height: 89vh;
      height: calc(89vh - 200px);
      background: #fff;
      ul {
        height: 100%;
        overflow-y: auto;
        margin: 0;
        padding: 0;
        li {
          display: flex;
          cursor: pointer;
          height: 80px;
          &:hover {
            background: #F5F8FA;
          }
          &.session-active {
            background: #F5F8FA;
            border-left: #FB4845 5px solid; 
          }
          & > div:first-child {
            padding: 10px 5px;
            span {
              display: inline-block;
              width: 40px;
              text-align: center;
              line-height: 40px;
              font-size: 20px;
              color: #fff;
              background: #5AC994;
              border-radius: 50%;
            }
            .is-grounp {
              background: #75B9E6;
            }
          }

          & > div:nth-child(2) {
            flex: 1;
            width: 0;
            padding: 20px 5px;
            h {
              span {
                margin-right: 5px;
                float: right;
                color: #9FA4B9;
              }
            }
            h:last-child {
              color: #9FA4A6;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }
        }
      }

      .right-mouse {
        position: absolute;
        z-index: 101;
        top: 0;
        left: 0;
        width: 100px;
        height: 40px;
        background: #fff;
        box-shadow: 0 0 5px 1px rgb(225, 225, 225);
        text-align: center;
        line-height: 40px;
        span {
          cursor: pointer;
        }
      }
    }

    // 右侧对话列表
    .chat-container {
      flex: 1;
      height: 100%;
      width: 79%;
      max-height: 89vh;
      min-height: 89vh;
      background: #F6F8F9; 
      .chat-list {
        border-bottom: 1px solid #ddd;
        max-height: 72vh;
        min-height: 72vh;

        .chat-title {
          display: flex;
          height: 70px;
          padding: 10px;
          font-size: 18px;
          color: #000;
          border-bottom: 1px solid #ddd;
          align-items: center;
          background: #fff;
          .is-avatar {
            display: inline-block;
            width: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            color: #fff;
            background: #5AC994;
            border-radius: 50%;
          }
          .chat-person {
            font-weight: 600;
            font-style: italic;
          }
        }
        ul {
          padding: 0px 0px;
          height: calc(69vh - 50px);
          overflow-y: auto;
          .more-message-btn {
            padding-top: 5px ;
            text-align: center;
            .el-button{
              font-size: 12px;
              font-style: italic;
            }
          }
          li {
            padding-left: 10px;
            padding-right: 10px;
            list-style-type: none;
            margin-top: 15px;
          }
          // 我自己的样式
          .myself {
            display: flex;
            justify-content: right;
            & > div:first-child {
              text-align: right;
              padding-right: 10px;
              & > p:first-child {
                font-size: 14px;
                span {
                  font-size: 12px;
                }
              }
              p.read-or-not {
                text-align: left;
                margin-top: 5px;
                color: #b0b2b1;
                font-size: 13px;
              }


              & > div {
                display: inline-block;
                position: relative;
              }
              .withdraw-wrapper {
                position: absolute;
                background: #1D2B3F;
                padding: 6px 15px;
                border-radius: 3px;
                left: 50%;
                top: -20px;
                transform: translateX(-50%);
                &::after {
                  content: '';
                  position: absolute;
                  left: 25px;
                  bottom: -10px;
                  border: 5px solid transparent;
                  border-top-color: #1D2B3F;
                }
              }
            }

            & > div:last-child {
              span {
                display: inline-block;
                width: 40px;
                text-align: center;
                line-height: 40px;
                font-size: 20px;
                color: #fff;
                background: #75B9E6;
                border-radius: 50%;
              }
            }
          }

          // 对方的样式
          .others {
            display: flex;
            justify-content: left;

            & > div:first-child {
              span {
                display: inline-block;
                width: 40px;
                text-align: center;
                line-height: 40px;
                font-size: 20px;
                color: #fff;
                background: #5AC994;
                border-radius: 50%;
              }
            }
            & > div:last-child {
              padding-left: 8px;
              p:first-child {
                text-align: left;
                font-size: 14px;

                span {
                  font-size: 12px;
                }
              }
            }
              
            .msg-wrapper {
              background: #ffffff !important;
            }
          }

          // 文件
          .file-wrapper {
            margin-top: 10px;
            ::v-deep .img-file {
              img {
                max-width: 150px;
                max-height: 150px;
                cursor: pointer;
              }
            }
            .other-file {
              display: flex;
              width: 300px;
              border-radius: 5px;
              font-size: 14px;
              border-top-right-radius: 0px;
              background: #fff;
              padding: 5px 10px;
              border: 1px solid #3CBAFF;
              div:nth-child(1) {
                position: relative;
                span {
                  position: absolute;
                  font-size: 14px;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  color: #fff;
                }
              }

              div:nth-child(2) {
                padding: 0px 10px;
                p {
                  margin-top: 3px;
                  &:first-child {
                    text-align: left;
                    width: 200px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                  }
                  &:last-child {
                    display: flex;
                    align-items: center;

                    .el-button {
                      margin-left: 20px;
                      padding: 0;
                    }
                  }
                }
              }
            }
          }

          // 文本信息
          .msg-wrapper {
            margin-top: 8px;
            background: #DEF4FF;
            padding: 5px 10px;
            width: fit-content;
            max-width: 500px;
            border-radius: 5px;
            font-size: 15px;
            border-top-right-radius: 0px;
            white-space: pre-wrap;
            text-align: left;
          }
        }
      }

      // 消息发送框
      .chat-send {
        height: 160px;
        background: #fff;
        position: relative;
        // 工具栏
        .chat-tool {
          border-bottom: 1px solid #ddd;
          height: 5vh;
          .chat-tool-item {
            display: flex;
            margin: auto;
            align-items: center;
            height: 100%;
            color: #98A0AA;
            padding-left: 19px;
            .chat-tool-item-upload {
              font-size: 26px;
              margin-left: 10px;
            }
          }
        }

        // 消息输入框
        .chat-input {
          margin-top: -5px;
          padding: 5px 5px;
          ::v-deep.el-textarea {
            .el-textarea__inner {
              border: none;
              box-shadow: 0 0 0 0px;
              background: transparent;
            }
          }
        }

        .chat-send-btn {
          padding: 5px 30px 30px 30px;
          text-align: right;
        }
      }
    }

    // 群组设置
    .setGroup{
      top: 5px;
      height: calc(100% - 85px);
      .group-users-wrapper{
        padding-left: 10px;
        display: flex;
        flex-wrap: wrap;
        div {
          width: 80px;
          text-align: center;
        }
        .userHeihgt{
          height: 100px;
        }
      }
      .demo-input-suffix{
        display: flex;
        margin-bottom: 26px;
        align-items: center;
        span {
          width: 92px;
          padding: 0 14px 0 10px;
          font-weight: 600;
        }
      }
      .group-btn-group {
        margin-top: 15px;
      }
    } 
  .avatar {
    background-color:#5AC994;
    font-size: 20px;
    size: 50px;
  }
  // 左侧个人信息
  .my-info {
    text-align: center;
    width: 90px;
    background: #428dbe;
    .not-avatar {
      width: 78px;
      height: 65px;
      border-radius: 4px;
      // background: #076caf;
      margin: auto;
      margin-top: 15px;
      img {
        width: 40px;
        height: 40px;
        background: transparent;
      }
      .not-avatar-title {
        font-family: "Source Han Sans CN";
        font-weight: 400;
        font-size: 12px;
        text-align: center;
        color: #fff;
      }
    }
  }
  .ulSpan{
    display: inline-block;
    width: 80px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .addPeople {
    display: flex;
    height: 80vh;
    padding: 10px 0;
  }
  .chat-dialog ::v-deep .el-dialog {
      width: 963px;
      height: 80vh;
      border-radius: 10px;
      .el-dialog__body {
        padding: 0px;
      }
      .el-dialog__header {
        display: none;
      }
      .chat-row-col1 {
        height:80vh;
        padding: 30px 20px;
        background: #f7f7f7;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
      }
      .chat-tree {
        height:93%;
        margin-top: 5px;
        overflow-y: auto;
        background: #f7f7f7;
      }
      .chat-row-col2 {
        height:80vh;
        padding: 30px 20px;
        .chat-col2-header {
          display: flex;
          align-items: end;
          height:3vh;
          & span:first-child {
            font-weight: 500;
            font-size: 20px;
            color: #020202;
          }
          & span:last-child {
            font-weight: 400;
            font-size: 14px;
            color: #8e8e8e;
            margin-left: auto;
          }
        }
        .chat-col2-body {
          height:80%;
          margin-top:9px;
        }
        .chat-col2-footer {
          margin-top:50px;
          height:4vh;
          display:flex;
          justify-content: center;
        }
      }
    }
  

  .dept {
    width: 18%;
    background: #fff;
    border-right: 1px solid #ddd;
    padding: 20px;
    overflow-y: auto;
    .el-tree {
      margin-top: 10px;
    }
    ::v-deep .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
      background-color: #eaf4ff;
      color: #1289FF; //节点的字体颜色
      font-weight: bold;
    }
    ::v-deep .el-tree-node:hover > .el-tree-node__content {
      background-color: #eaf4ff;
      color: #1289FF; //节点的字体颜色
      font-weight: bold;
    }
  }

  .team {
      width: 18%;
      height: 89vh;
      background: #f2f5f7;
      overflow-y: auto;
      // padding: 10px;
      p {
        margin: 10px;
      }
      ul{
        .chosedItem {
          background: #fff;
        }
        li{
          height: 60px ;
          list-style-type: none;
          &:hover {
            background: #fff;
          }
          .el-avatar{
            margin-left: -30px;
            background-color:#5AC994;
            font-size: 20px;
            size: 50px;
          }
        }
      }
    }
    .person {
      flex: 1;
      background: #fff;
      overflow-y: auto;
      display: flex;
      justify-content: center;
      padding-top: 85px;
      padding-bottom: 30px;
      .person-box {
        & > p {
          margin-top: 5px;
          text-align: center;
          span {
            width: 50px;
            line-height: 50px;
          }
        }
        & > div {
          font-size: 14px;
          margin-top: 10px;
          p {
            margin-bottom: 15px;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 16px;
            color: #000;
            span {
              display: inline-block;
              color: #707070;
              width: 50px;
            }
          }
        }
      }
    }
  </style>
